<template>
    <el-container>
        <el-aside width="auto">
            <admin-sidebar :sidebar-collapse="sidebarCollapse"></admin-sidebar>
        </el-aside>
        <el-container class="main-container" :class="skin ? 'skin-night' : ''">
            <el-header height="60px">
                <admin-header :skin="skin"
                              :sidebar-collapse.sync="sidebarCollapse"
                              @setSkin="setSkin"
                              @setSidebarCollapse="setSidebarCollapse"
                              @setting="adminSetting"></admin-header>
            </el-header>
            <!-- 标签 -->
            <!--            <el-tabs value="resume"-->
            <!--                     type="card"-->
            <!--                     closable>-->
            <!--                <el-tab-pane label="我的工作台" name="work"></el-tab-pane>-->
            <!--                <el-tab-pane label="简历" name="resume"></el-tab-pane>-->
            <!--            </el-tabs>-->
<!--            <div class="app-tag">-->
<!--                <el-tag closable :disable-transitions="false">我的工作台</el-tag>-->
<!--                <el-tag effect="dark" closable>简历库</el-tag>-->
<!--            </div>-->
            <el-main>
                <el-scrollbar class="r-custom-scrollbar" :native="false">
                    <transition name="el-fade-in" mode="out-in">
                        <router-view></router-view>
                    </transition>
                </el-scrollbar>
            </el-main>
        </el-container>
        <!-- from dialog -->
        <component :is="dialogBox.component" :dialog="dialogBox" @close="closeDialogBox"></component>
    </el-container>
</template>

<script lang="ts">
import Component, { mixins } from 'vue-class-component'

import { setStorage, getStorage } from '@/utils'

import DialogBoxMixins from '@/mixins/dialog'
import AuthMixins from '@/mixins/cms/auth'

import AdminHeader from '@/components/cms/AdminHeader.vue'
import AdminSidebar from '@/components/cms/AdminSidebar.vue'
import AdminSetting from '@/views/cms/admin/admin-user/Setting.vue'

@Component({
  components: {
    AdminHeader,
    AdminSidebar,
    AdminSetting
  }
})
export default class AdminView extends mixins(DialogBoxMixins, AuthMixins) {
  // 皮肤
  public skin: boolean = false

  // 侧栏折叠
  private sidebarCollapse: string = getStorage('cms_sidebar_collapse') ?? 'no'

  /**
   * 设置皮肤
   *
   * @return {void}
   */
  public setSkin(): void {
    this.skin = !this.skin
  }

  /**
   * 折叠
   *
   * @param {String} value
   * @return {void}
   */
  public setSidebarCollapse(value: string): void {
    this.sidebarCollapse = value
    setStorage('cms_sidebar_collapse', value)
  }


  /**
   * 管理设置
   *
   * @private
   */
  public adminSetting(command: string): void {
    if (command === 'setting') {
      this.dialogBox.component = 'AdminSetting'
      console.log(this.dialogBox)
      this.$nextTick(() => {
        this.dialogBox.visible = true
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-container {
    height: 100%;
}

.el-header {
    display: flex;
    padding: 0;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    //box-shadow: 0 3px 5px rgba(#000, .1);
    z-index: 999;
}

.el-aside {
    display: flex;
    /*background-color: #D3DCE6;*/
    /*color: #333;*/
    /*text-align: center;*/
    /*line-height: 200px;*/
}

.el-main {
    flex: 1;
    position: relative;
    height: 100%;
    padding: 0;
    background-color: #F2F3F8;

    .el-scrollbar {
        flex: 1;
        height: 100%;

    }

    .el-scrollbar__view {
        height: 100%;
    }
}

.app-tag {
    position: relative;
    padding: 10px 20px;
    background-color: #fff;
    box-shadow: 0 5px 5px rgba(#000, .05);
    z-index: 999;

    .el-tag {
        margin-right: 8px;
    }
}

.main-container {
    //height: calc(100% - 60px);
    height: 100%;
}
</style>
